
<!DOCTYPE html>
<html>
<include file="public@head"/>
<script charset="utf-8" src="__TMPL__/public/assets/js/echarts.js"></script>
<body>

<include file="public@nav"/>
<div class="container" id="data-index">
<div class="container btn-group" data-toggle="buttons" id="kline" style="width: 100%;">
<a class="btn btn-info focus kline" id="m1"  onclick="k_line(1)">1m</a>
<a class="btn btn-info kline" id="m5"  onclick="k_line(5)">5m</a>
<a class="btn btn-info kline" id="m15"  onclick="k_line(15)">15m</a>
<a class="btn btn-info kline" id="m30"  onclick="k_line(30)">30m</a>
<a class="btn btn-info kline" id="m60"  onclick="k_line(60)">1h</a>
</div>
<div id="main" class="row" style="height: 300px;"></div>
<script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            myChart.title = '2018年 牛币指数';
            myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

            k_line(1); // 默认显示1分钟K线图

            $('.btn').click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('focus');
            $(this).siblings().removeClass('focus');
            });
            // 点击时显示不同时间K线

            setInterval(function () {
            $('.focus').trigger("click");
            },60000);
            // 设置K线刷新时间

            function k_line(kind){

            $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/portal/index/kline",    //请求发送到TestServlet处
            data : {'kind':kind},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
            rawData = result;
            function calculateMA(dayCount, data) {
            var result = [];
            for (var i = 0, len = data.length; i < len; i++) {
            if (i < dayCount) {
            result.push('-');
            continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
            sum += data[i - j][1];
            }
            result.push(sum / dayCount);
            }
            return result;
            }

            var dates = rawData.map(function (item) {
            return item[0];
            });

            var data = rawData.map(function (item) {
            return [+item[1], +item[2], +item[5], +item[6]];
            });

            myChart.hideLoading();    //隐藏加载动画

            myChart.setOption({
            backgroundColor: '#000000',
            legend: {
            data: ['K线', 'MA5', 'MA10', 'MA20', 'MA30'],
            inactiveColor: '#777',
            textStyle: {
            color: '#fff'
            }
            },
            tooltip: {
            trigger: 'axis',
            axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
            color: '#376df4',
            width: 2,
            opacity: 1
            }
            }
            },
            xAxis: {
            type: 'category',
            data: dates,
            axisLine: { lineStyle: { color: '#8392A5' } }
            },
            yAxis: {
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' } },
            splitLine: { show: false }
            },
            grid: {
            bottom: 80
            },
            dataZoom: [{
            textStyle: {
            color: '#8392A5'
            },
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            dataBackground: {
            areaStyle: {
            color: '#8392A5'
            },
            lineStyle: {
            opacity: 0.8,
            color: '#8392A5'
            }
            },
            handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
            }
            }, {
            type: 'inside'
            }],
            animation: false,
            series: [
            {
            type: 'candlestick',
            name: 'K线',
            data: data,
            itemStyle: {
            normal: {
            color: '#FD1050',
            color0: '#0CF49B',
            borderColor: '#FD1050',
            borderColor0: '#0CF49B'
            }
            }
            },
            {
            name: 'MA5',
            type: 'line',
            data: calculateMA(5, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
            normal: {
            width: 1
            }
            }
            },
            {
            name: 'MA10',
            type: 'line',
            data: calculateMA(10, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
            normal: {
            width: 1
            }
            }
            },
            {
            name: 'MA20',
            type: 'line',
            data: calculateMA(20, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
            normal: {
            width: 1
            }
            }
            },
            {
            name: 'MA30',
            type: 'line',
            data: calculateMA(30, data),
            smooth: true,
            showSymbol: false,
            lineStyle: {
            normal: {
            width: 1
            }
            }
            }
            ]
            });
            }

            },
            error : function(errorMsg) {
            //请求失败时执行该函数
            // alert(errorMsg);
            console.log(errorMsg);
            myChart.hideLoading();
            }
            });

            }

</script>
</div>
</body>
</html>